import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import News from './News'
import Message from './Message'
import MyNavLink from '../../components/MyNavLink'

export default class Home extends Component {
    render() {
        return (
            <div>
                <h3>我是Home的内容</h3>
                <ul className="nav nav-tabs">
                    <li>
                {/* 
                    这里要注意，并不能直接使用 /news 或者 /messages 进行
                    因为路由器在匹配的时候，是根据路由注册的层级/时机来逐层匹配的
                    也就是说，/news 会先去App.js中的路由中进行匹配，如果匹配不到，那么是到达不了这个页面的路由的
                    所以这时，就需要在Link标签中使用二级路由了.

                    同时，再讲回 exact 精准匹配。如果父路由开启了精准匹配，那么二级路由这种写法，在一级路由的时候就无法
                    校验通过，匹配上正确的子路由也就无从谈起。最终只能根据Rediect组件跳转到对应的默认页面。所以说，精准匹配尽量不要随便开启。
                */}
                        <MyNavLink to="/home/news">News</MyNavLink>
                    </li>
                    <li>
                        <MyNavLink to="/home/messages">Message</MyNavLink>
                    </li>
                </ul>

                <Route path="/home/news" component={News} />
                <Route path="/home/messages" component={Message} />
            </div>
        )
    }
}
